iT邦幫忙

DAY 21
2

使用 EZoApp 開發 App 好好玩系列 第 21

Day 21 - EZoApp 串接 Google SpreadSheets 做成績單 App

  • 分享至 

  • xImage
  •  

相信大家手邊 Excel 的資料一定不少,或是有不少人應該也慢慢的將這些試算表的資料存去雲端,這篇將介紹如何利用 EZoApp 的 Google SpreadSheets 元件串接 Google SpreadSheets,簡簡單單幾個步驟就做出一個成績單的 App 。( 完成範例:http://jqmdesigner.appspot.com/designer.html#&ref=4813802692411392 )

要進行這件事,第一個要進行的步驟就是建立 Google 試算表,就像 Excel 一樣建立一份成績單,或是利用匯入的方式匯入 Excel 的成績單也可以。

並且打開 Google 試算表的權限為**「知道連結的人均可檢視」**

到這個步驟之後,其實你就可以用 EZoApp 來串接這份試算表,唯一需要記得的小細節,就是試算表的這串網址,一堆英文數字結合的這一大串是這份試算表的 key,而後面 gid 則是這份試算表的分頁,有了這兩組,我們才能夠確定讀取這份試算表。

接下來就是使用 EZoApp 的 google-sheets-table 這個元件,拖拉進入畫面之後,把剛剛的 key 和 gid 填入

按下預覽,就會直接看到試算表出現在畫面裡頭。( 範例: http://jqmdesigner.appspot.com/designer.html#&ref=4847600125607936 )

就這樣很簡單的就把成績單做起來了,不過我們現在要來加上一些變化,畢竟成績不會只有一科,所以拖拉 header 和 tabbar 元件進入畫面中,tabbar 可以將 icon 設定為 default 就不會有 icon,然後 actived 設為 true 就會變成藍色的選取狀態

再來就是要寫點簡單的程式,讓切換 tabbar 的時候試算表也會跟著切換,先看到 HTML,給 ul 一個 id 名稱,然後 li 都加入 gid 的屬性,並將對應的 gid 填入方便後續使用。

      <ul  id="footerBtn">
        <li>
          <a class="ui-btn-active ui-state-persist" gid="0">國文</a>
        </li>
        <li>
          <a gid="570331424">英文</a>
        </li>
        <li>
          <a gid="10780180">數學</a>
        </li>
      </ul>

接著撰寫 JS,按照官網與其他 blog 的說明,先將 table 變成 gk 元件,然後設定點選時會切換的 function。

(function () {
  $(document).on('pageshow', '#home', function () {
    var table = $('#gk-10197jY9').gk();
    $('#footerBtn li a').on('click', function () {
      var title = $(this).text();
      $('h3').text(title + '成績單');
      var scoreGid = $(this).attr('gid');
      table.gid = scoreGid;
      table.query = '';
      table.refresh();
    });
  });
})();

做到這邊為止,就已經完成了一個成績單顯示的 App 囉!( 範例:http://jqmdesigner.appspot.com/designer.html#&ref=4813802692411392 )

最後再補充一點小東西,EZoApp 的 google sheets table 元件也提供可以撰寫 sql 語法的地方,也就是 query 這個欄位,如果會撰寫 sql 語法,便可以將你的試算表做排序或篩選的動作,其實相當的方便噢!( 參考:EZoApp 以 Google SpreadSheets 作為資料庫的進階應用 - 成績單應用2 )


上一篇
Day 20 - EZoApp 串接蘋果日報 RSS 做新聞 App
下一篇
Day 22 - EZoApp 串接 picasa 做「海賊懸賞單」 App
系列文
使用 EZoApp 開發 App 好好玩30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言